<template>
  <div class="login-password">
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="loginPass-items">
      <van-form>
        <div class="loginPass-item">    <van-field v-model="changepass.password" label-width="65px" border label-align="center" maxlength="20" label="原密码" colon required/>     
        </div>
        <div class="loginPass-item">    <van-field v-model="changepass.newPassword" label-width="65px"  label="新密码" maxlength="20" label-align="center" colon required 
              :rules="[{pattern:passwordValidator, message: '输入6-20个字母、数字、下划线'}]"/>    
        </div>
        <!-- <div class="loginPass-item">    <van-field v-model="confimPassword"  label-width="65px" label="确认密码" maxlength="20" label-align="center" colon required 
              :rules="[{validator:confirm , message:'密码与上一次输入密码不一致'}]"/>     
        </div> -->
      </van-form>
    </div>
    <div class="login-buttom" @click="finish">
      完成
    </div>
    <van-dialog v-model="show" title="提示" show-cancel-button @confirm="confirmChange">
      <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
      <div class="loginPass-confim">
        <span>确认更改密码</span>
      </div>
    </van-dialog>
    <van-dialog v-model="rightConfim" title="提示"  @confirm="confirmSure">
      <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
      <div class="loginPass-confim">
        <span v-if="rightConfim_success==true">密码修改成功</span>
        <span v-else>密码错误！</span>
      </div>
    </van-dialog>
  </div>

</template>

<script>
import {changePassword} from '@/api/user'
export default {
  data(){
    return {
      // 修改密码
      changepass:{
        password:'',
        newPassword:'',
      },
      // 确认密码
      confimPassword:'',
      // 密码正则
       passwordValidator:/^(\w){6,20}$/,
       // 确认更改密码 确认框
       show:false,
       // 密码修改成功提示框
       rightConfim:false,
       // 密码修改成功/失败
       rightConfim_success:true,
       //修改失败错误提示
       ErrorMsg:'',
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push('/loginSet')
    },
    confirm(val){
      if(val!= this.changepass.newPassword){
        return false;
      }else {
        return true
      }
    },
    finish(){
      if(this.changepass.password && this.changepass.newPassword){
        let flag = this.passwordValidator.test(this.changepass.newPassword)
        if(flag){
          this.show = true
        }
      }
      
      
    },
    // 
    confirmSure(){
      // this.$router.push('/loginSet')
    },
    // 确认修改
    confirmChange(){
      
      this.$toast.loading();
      changePassword(this.changepass).then(res => {
        if(res.code==0){
          setTimeout(() => {
            this.$toast.clear();
            this.rightConfim = true
            this.rightConfim_success = true
          },700)
        }else {
          this.ErrorMsg = res.msg
            setTimeout(() => {
            this.$toast.clear();
            this.rightConfim = true
            this.rightConfim_success = false
          },700)
        }

      })
      
        
    },
      
  },
}
</script>

<style lang="less">
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
  .loginPass-items{
    width: 80%;
    margin: 10px auto;
    .loginPass-item{
      margin-top: 15px;
      // border-bottom: 1px solid rgb(206, 206, 206);
    }
  }
  .login-buttom{
    width: 70%;
    height: 45px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    background-color:rgb(68, 167, 248);
    color: rgba(255, 255, 255, 100);
    font-size: 20px;
    text-align: center;
    font-family: Microsoft Yahei;
  }
  .loginPass-confim{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: 300px;
    height: 50px;
  }
</style>